<template>
  <div ref="BarECharts" style="width: 100%;height: 210px"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])


const initEcharts = ((item) => {
  const result = props.tableData


  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color:['#73deb3','#90b3fc','#ffc283'],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        right: '5%',
        show: true,
        data: ['可用地', '已用地', '规划用地']
      },
      calculable: true,
      grid: {
        top: '15%',
        bottom: '15%',
        left: '5%',
        right: '5%'

      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {
            show: true,
            interval: 0,//使x轴文字显示全
          },
          data: result.map(item => item.parkName)
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '可用地',
          type: 'bar',
          data: result.map(item => {
            return item.usableCount
          }),
        },
        {
          name: '已用地',
          type: 'bar',
          data: result.map(item => {
            return item.usedCount
          }),
        },
        {
          name: '规划用地',
          type: 'bar',
          data: result.map(item => {
            return item.forPlanCount
          }),
        },
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
